import React, { Component } from "react";
import PubSub from "pubsub-js";
import "./Show.css";
export default class Show extends Component {
  state = {
    user: [],
    isFirst: true,
    isLoading: false,
    err: "",
  };
  componentDidMount() {
    this.token = PubSub.subscribe("state", (msg, data) => {
      console.log(msg);
      this.setState(data);
    });
  }
  componentWillUnmount() {
    PubSub.unsubscribe(this.token);
  }

  render() {
    const { isFirst, isLoading, err, user } = this.state;
    return (
      <div className="row">
        {isFirst ? (
          <h2>请输入搜索信息</h2>
        ) : isLoading ? (
          <h2>Loading...</h2>
        ) : err ? (
          err
        ) : (
          user.map(({ id, avatar_url, login, html_url }) => {
            return (
              <div key={id} className="card">
                <a href={html_url} target="_blank" rel="noreferrer">
                  <img
                    alt="head_portrait"
                    src={avatar_url}
                    style={{ width: "100px" }}
                  />
                </a>
                <p className="card-text">{login}</p>
              </div>
            );
          })
        )}
      </div>
    );
  }
}
